<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
    export default {
        name: "SelectResources",
        props: {
             // 使用者window实例 必定义
            appWindow: {
                type: Object,
                default: null,
            },
            value: {
                default () {
                    return [];
                }
            },
             // 接口列表
        apiConfig: {
            type: Object,
            default: {
                // 分组列表
                albumList: {
                    url: "mall-site-portal/album/listAll",
                },
                // 分组添加
                albumAdd: {
                    url: "mall-site-portal/album/create",
                },
                // 分组删除
                albumDel: {
                    url: "mall-site-portal/album/delete",
                },
                // 分组编辑
                albumEdit: {
                    url: "mall-site-portal/album/update",
                },
                // 数据列表
                dataList: {
                    url: "mall-site-portal/album-info/list",
                },
                // 数据删除
                dataDel: {
                    url: "mall-site-portal/album-info/delete",
                },
                // 数据修改
                dataEdit: {
                    url: "mall-site-portal/album-info/update",
                },
                // 数据同步
                dataSync: {
                    url: "mall-site-portal/album-info/materialUpload",
                },
            },
        },

            // 最大上传数量
            count: {
                type: Number,
                default: -1,
            },
        },
        computed: {
            // 选择图片
            selectValue() {
                // 判断接受到的数据的类型 支持字符串 与数组
                if (this.isString()) {
                    if (this.$vFN.Utils.isEmpty(this.value)) {
                        return [];
                    } else {
                        return this.value.split(",");
                    }
                } else {

                    if (this.$vFN.Utils.isEmpty(this.value)) {
                        return [];
                    } else {
                        return [...this.value];
                    }
                }

            },
        },
        data() {
            return {
                // 选择图片

                dragging: null,
            };
        },
        methods: {
            // 判断数据类型是否为字符串
            isString() {
                let _type = typeof this.value;
                if (_type == "string") {
                    return true;
                } else {
                    return false
                }
            },
            handleDragStart(e, item, index) {
                console.log("哪期", item, index)
                this.dragging = index;
            },
            handleDragEnd(e, item, index) {
                this.dragging = null;
            },
            handleDragOver(e) {
                e.dataTransfer.dropEffect = "move";
            },
            handleDragEnter(e, item, index) {
                console.log(item, index);
                e.dataTransfer.effectAllowed = "move";
                if (index == this.dragging) {
                    return;
                }
                let newItems = [...this.selectValue];
                newItems.splice(index, 0, ...newItems.splice(this.dragging, 1));
                this.dragging = index;
                if (this.isString()) {
                    this.updateValue(newItems.join(","));
                } else {
                    this.updateValue(newItems);
                }
            },


            // 删除选择
            delSelectData(index_) {


                this.selectValue.splice(index_, 1);
                this.updateValue(this.selectValue);
            },

            openBox() {
                this.$vFN.Directives.SelectResourcesAudio({
                    appWindow:this.appWindow,
                    count: this.count < 0 ? this.count : (this.count - this.selectValue.length),
                    onSuccess: (res) => {
                        let _selectValue = this.selectValue;
                        res.data.map(item => {
                            _selectValue.push(item)
                        })
                        this.$set(this, "selectValue", _selectValue)
                        this.updateValue(_selectValue);

                    },

                });
            },

            updateValue(v_) {
                if (this.isString()) {
                    v_ = v_.join(",");
                }
                this.$emit("input", v_);
                this.$emit("change", v_);
            },
        },
        watch: {},
        mounted() {
        },
        beforeCreate() {},
    };
</script>